<template>
  <div style="width:100%;height:100%;min-width: 350px;" :id="visite_id" class="pie"></div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: 'dataSourcePie',
    props: ['xDataArr', 'yDataArr', 'visite_volume_id', 'xDataTitle', 'div_width', 'color_list'],
    data () {
      return {
        xDataList: [],
        yDataList: [],
        visite_id: '',
        title: '',
        div_w: 350,
        default_colorList: [
          '#C62828',
          '#AD1457',
          '#6A1B9A',
          '#283593',
          '#1565C0',
          '#0277BD',
          '#00838F',
          '#00695C',
          '#2E7D32',
          '#558B2F',
          '#F9A825',
          '#FF8F00',
          '#EF6C00',
          '#D84315'
        ],
      };
    },
    created: function () {
      var _this = this;
      _this.xDataList = _this.xDataArr;
      _this.yDataList = _this.yDataArr;
      _this.visite_id = 'id_' + _this.visite_volume_id;
      _this.title = _this.xDataTitle;
      _this.div_w = _this.div_width ? _this.div_width : _this.div_w;
      _this.default_colorList = _this.color_list ? _this.color_list : _this.default_colorList;
      _this.init();
    },
    watch: {
      'yDataArr': function () {
        var _this = this;
        if (_this.yDataArr && _this.yDataArr.length > 0) {
          _this.xDataList = _this.xDataArr;
          _this.yDataList = _this.yDataArr;
          _this.visite_id = 'id_' + _this.visite_volume_id;
          _this.title = _this.xDataTitle;
          _this.div_w = _this.div_width ? _this.div_width : _this.div_w;
          _this.default_colorList = _this.color_list ? _this.color_list : _this.default_colorList;
          _this.init();
        }
      }
    },
    mounted () {
      var _this = this;
      this.$nextTick(() => {
        if (_this.div_w > 350) {
          $('#' + _this.visite_id).css({"width": _this.div_w + "px"});
          $('#' + _this.visite_id).css({"minWidth": _this.div_w + "px"});
        }
        var visite_id = _this.visite_id;
        var dataSourcePie = echarts.init(document.getElementById(visite_id));
        const option = {
          title: {
            text: _this.title,//'2017年纳税前五名的分成比例',
            x: 'center',
          },
          grid: {
            top: '40px',
            left: '10px',
            right: '10px',
            bottom: '5px',
            containLabel: true
          },
          legend: {
            orient: 'vertical',
            x: 'right',
            y: 'center',
            data: _this.xDataList,//['济南天骄网苑', '爱网人花园网吧', '其他', '爱网人易尚', '网果网咖', '新世纪电影城洪楼店']
          },
          animation: true,
          // 加载动画
          animationDuration: function (idx) {
            // 越往后的数据延迟越大
            return idx * 300;
          },
          animationDurationUpdate: function (idx) {
            // 越往后的数据延迟越大
            return idx * 300;
          },
          animationDelay: function (idx) {
            // 越往后的数据延迟越大
            return idx * 300;
          },
          animationDelayUpdate: function (idx) {
            // 越往后的数据延迟越大
            return idx * 300;
          },
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
          },
          series: [
            {
              //name: '分成比例',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: _this.yDataList,
              itemStyle: {
                normal: {
                  // 定制显示（按顺序）
                  color: function (params) {
                    var colorList = _this.default_colorList;
                    return colorList[params.dataIndex]
                  }
                }
              }
              /*[
               {value: 235, name: '济南天骄网苑'},
               {value: 274, name: '爱网人花园网吧'},
               {value: 600, name: '其他'},
               {value: 310, name: '爱网人易尚'},
               {value: 335, name: '网果网咖'},
               {value: 400, name: '新世纪电影城洪楼店'}
               ]*/
            }
          ]
        };
        dataSourcePie.setOption(option);
        window.addEventListener('resize', function () {
          dataSourcePie.resize();
        });
      });
    },
    methods: {
      init: function () {
        var _this = this;
        this.$nextTick(() => {
          if (_this.div_w > 350) {
            $('#' + _this.visite_id).css({"width": _this.div_w + "px"});
            $('#' + _this.visite_id).css({"minWidth": _this.div_w + "px"});
          }
          var visite_id = _this.visite_id;
          var dataSourcePie = echarts.init(document.getElementById(visite_id));
          const option = {
            title: {
              text: _this.title,//'2017年纳税前五名的分成比例',
              x: 'center',
            },
            grid: {
              top: '40px',
              left: '10px',
              right: '10px',
              bottom: '5px',
              containLabel: true
            },
            legend: {
              orient: 'vertical',
              x: 'right',
              y: 'center',
              data: _this.xDataList,//['济南天骄网苑', '爱网人花园网吧', '其他', '爱网人易尚', '网果网咖', '新世纪电影城洪楼店']
            },
            //backgroundColor: '#2c343c',
            tooltip: {
              trigger: 'item',
              formatter: "{b} : {c} ({d}%)"
            },
            series: [
              {
                //name: '分成比例',
                type: 'pie',
                radius: '55%',
                center: ['40%', '50%'],
                data: _this.yDataList,
                itemStyle: {
                  normal: {
                    // 定制显示（按顺序）
                    color: function (params) {
                      var colorList = [
                        '#C62828',
                        '#AD1457',
                        '#6A1B9A',
                        '#283593',
                        '#1565C0',
                        '#0277BD',
                        '#00838F',
                        '#00695C',
                        '#2E7D32',
                        '#558B2F',
                        '#F9A825',
                        '#FF8F00',
                        '#EF6C00',
                        '#D84315'
                      ];
                      return colorList[params.dataIndex]
                    }
                  }
                }
                /*[
                 {value: 235, name: '济南天骄网苑'},
                 {value: 274, name: '爱网人花园网吧'},
                 {value: 600, name: '其他'},
                 {value: 310, name: '爱网人易尚'},
                 {value: 335, name: '网果网咖'},
                 {value: 400, name: '新世纪电影城洪楼店'}
                 ]*/
              }
            ]
          };
          dataSourcePie.setOption(option);
          window.addEventListener('resize', function () {
            dataSourcePie.resize();
          });
        });
      },
    },
  };
</script>
